<template>
  <div class="echartsBar">
    <div class="caouseHead" :class="{ smallCharts: smallCharts }" v-if="!width">
      <div style="padding-left: 133px" v-if="smallCharts"></div>
      <div v-if="exitFullScreen" style="padding-left: 45px" />
      <div>分数统计</div>
      <div class="btnBox" @click="handelFullScreen" v-if="!smallCharts">
        <img :src="require('@/assets/images/fullIcon.png')" />
      </div>
      <!-- <div class="legend">
        <div class="lineBox">
          <div class="line green" />
          <div class="title">最高分</div>
        </div>
        <div class="lineBox">
          <div class="line yellow" />
          <div class="title">平均分</div>
        </div>
        <div class="lineBox">
          <div class="line red" />
          <div class="title">最低分</div>
        </div>
      </div> -->
      <div v-if="exitFullScreen">
        <div class="fullScreenAndnarrow">
          <div class="btnBox" @click="handelExitFullScreen">
            <img :src="require('@/assets/images/narrowIcon.png')" />
          </div>
        </div>
      </div>
    </div>
    <div class="statisticsInfoTitle" v-else>
      <span
        >总分：100
        <img
          :src="require('@/assets/images/newFull.png')"
          @click="handelFullScreen"
          v-if="!exitFullScreen"
        />
        <img
          :src="require('@/assets/images/newFull.png')"
          @click="handelExitFullScreen"
          v-else
        />
      </span>
    </div>
    <div class="echartsBox">
      <div
        :id="[`${echartsName}`]"
        class="histogram"
        :style="[
          {
            width: exitFullScreen
              ? '95vw'
              : width
              ? width
              : collapse
              ? '548px'
              : '1168px',
          },
          {
            height: exitFullScreen
              ? '490px'
              : height
              ? height
              : collapse
              ? '304px'
              : '350px',
          },
        ]"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null,
      // 指定图表的配置项和数据
      option: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["最高分", "平均分", "最低分"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "60px",
          containLabel: true,
        },
        toolbox: {
          right: 10,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        dataZoom: [
          {
            start: this.start,
            end: this.end,
            startValue: "",
          },
          {
            type: "inside",
          },
        ],
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: this.taskCount,
          axisLine: {
            // onZero: false,
            lineStyle: {
              width: 3,
              color: "#1296db",
            },
          },
          axisTick: {
            show: true,
            alignWithLabel: {
              boundaryGap: false,
            },
          },
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: 35,
            margin: 15,
            fontFamily: " Microsoft JhengHei UI",
            fontSize: 14,
            fontWeight: "bold",
            show: true,
            color: "#000",
            formatter: function (val) {
              var strs = val.split(""); //字符串数组
              var str = "";
              for (var i = 0, s; (s = strs[i++]); ) {
                //遍历字符串数组
                str += s;
                if (!(i % 6)) str += "\n"; //按需要求余
              }
              return str;
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },

          axisLine: {
            onZero: false,
            show: false,
            lineStyle: {
              width: 5,
              color: "#1296db",
            },
          },
          axisTick: {
            inside: false,
            show: false,
            length: 10,
          },
          axisLabel: {
            show: true,
            interval: 0, // 显示所有标签
            margin: 20,
            fontFamily: "PMingLiU-ExtB",
            fontSize: 20,
            color: "#003262",
          },
        },
        series: [
          {
            name: "最高分",
            type: "line",
            itemStyle: {
              normal: {
                color: "#5bc176",
                lineStyle: {
                  color: "#5bc176",
                  width: 3,
                },
              },
            },
            symbol: "circle", //设定为实心点
            symbolSize: 10, //设定实心点的大小
            data: [],
          },
          {
            name: "平均分",
            type: "line",
            itemStyle: {
              normal: {
                color: "#f69b9b",
                lineStyle: {
                  color: "#f69b9b",
                  width: 3,
                },
              },
            },
            symbol: "circle", //设定为实心点
            symbolSize: 10, //设定实心点的大小
            data: [],
          },
          {
            name: "最低分",
            type: "line",
            itemStyle: {
              normal: {
                color: "#f9f56e",
                lineStyle: {
                  color: "#f9f56e",
                  width: 3,
                },
              },
            },
            symbol: "circle", //设定为实心点
            symbolSize: 10, //设定实心点的大小
            data: [],
          },
        ],
      },
    };
  },
  props: {
    echartsName: String,
    exitFullScreen: Boolean,
    collapse: Boolean,
    taskCount: Array,
    scoreCount: Object,
    //滚动条默认开始结束位置
    start: Number,
    end: Number,
    smallCharts: Boolean, // 小图显示标签
    width: String,
    height: String,
    showName: Boolean,
  },
  watch: {
    taskCount(n) {
      this.option.dataZoom[0].startValue = n[0]?.value;
      this.option.xAxis.data = n;
      this.initData();
      this.$nextTick(() => {
        this.createChart();
      });
    },
    scoreCount(n, o) {
      this.initData();
      this.$nextTick(() => {
        this.createChart();
      });
    },
  },
  methods: {
    createChart() {
      // 解决toolbar重置图表功能失效
      document.getElementById(`${this.echartsName}`)?.setAttribute('_echarts_instance_', '')
      if (!document.getElementById(`${this.echartsName}`)) return
      // 初始化echarts实例
      this.myChart = this.$echarts.init(
        document.getElementById(`${this.echartsName}`)
      );
      // 导入配置
      this.myChart.setOption(this.option);
    },
    initData() {
      this.option.series[0].data = this.scoreCount.maxScore;
      this.option.series[1].data = this.scoreCount.avgScore;
      this.option.series[2].data = this.scoreCount.minScore;
      if (this.width && !this.showName) {
        this.option.xAxis.axisLabel.show = false;
      }
    },
    // 退出全屏
    handelExitFullScreen() {
      this.$emit("exitFullScreen");
    },
    // 进入全屏
    handelFullScreen() {
      this.$emit("handelFullScreen");
    },
  },
  mounted() {
    this.initData();
    this.createChart();
  },
};
</script>

<style lang="stylus" scoped>
.echartsBar {
  .caouseHead {
    position: relative;
    padding: 0 7%;
    padding-bottom: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 103px;
    font-family: Microsoft JhengHei UI;
    font-size: 20px;
    font-weight: bold;
    color: #000000;

    .btnBox {
      float: right;
      cursor: pointer;
      position: absolute;
      top: 54px;
      right: 273px;
      display: inline-block;
      width: 45px;
      height: 45px;
      text-align: center;
      line-height: 45px;
      background-color: #003262;
      border-radius: 5px;

      img {
        object-fit: cover;
      }
    }

    .legend {
      position: absolute;
      top: 38px;
      right: 55px;
      width: 133px;
      height: 66px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      .lineBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        line-height: 16px;

        .line {
          width: 60px;
          height: 6px;
          background-color: #ef6765;
          border-radius: 10px;
          border: solid 1px #ef6765;
        }

        .green {
          background-color: #91cd74;
          border: solid 1px #91cd74;
        }

        .yellow {
          background-color: #f9c957;
          border: solid 1px #f9c957;
        }

        .red {
          background-color: #ef6765;
          border: solid 1px #ef6765;
        }

        .title {
          font-family: Yu Gothic UI;
          font-weight: 300;
          font-size: 12px;
          color: #000000;
        }
      }
    }

    .fullScreenAndnarrow {
      // display: flex;
      // justify-content: center;
      // align-items: center;
      // width: 45px;
      // height: 45px;
      // background-color: #003262;
      // border-radius: 5px;
    }
  }

  .statisticsInfoTitle {
    padding-top: 5px;
    padding-bottom: 7px;
    font-family: Source Han Sans CN;
    font-size: 1rem;
    color: #000000;
    text-align: center;

    span {
      position: relative;
    }

    img {
      cursor: pointer;
      position: absolute;
      right: -32px;
      top: 3px;
    }
  }

  .smallCharts {
    display: block;
    text-align: center;
    line-height: 103px;

    .btnBox {
      display: none;
    }

    .legend {
      position: relative;
      right: unset;
      top: unset;
    }
  }

  .echartsBox {
    display: flex;
    align-items: center;
    // height: 447px;
    // background-color: rgba(101, 99, 99, 0.09);
  }

  .histogram {
    margin: 0 auto;
    height: 288px;
  }
}
</style>